<template>
  <a-modal
    title="新增"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :visible="marketInfoAddVisiable"
    :footer="null"
  >
    <a-form :form="form">
      <a-row>基本信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="集团商户编号" v-bind="formItemLayout">
            <a-input
              :disabled="true"
              v-decorator="[
                'groupMchntNo',
                { rules: [{ required: true, message: '系统自动生成' }] },
              ]"
            /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="集团商户名称" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'groupMchntName',
                { rules: [{ max: 40, message: '不能超过40位字符' }] },
              ]"
            ></a-input> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="是否集中收款" v-bind="formItemLayout">
            <a-select
              v-decorator="[
                'isReceiveRadio',
                { rules: [{ required: true, message: '必选' }] },
              ]"
              @change="handleChange"
            >
              <a-select-option value="Y">是</a-select-option>
              <a-select-option value="N">否</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="创建机构" v-bind="formItemLayout">
            <a-input
              :disabled="true"
              v-decorator="['crtOrgName']"
            /> </a-form-item
        ></a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="经营范围" v-bind="formItemLayout">
            <a-select
              v-decorator="[
                'managementScope',
                { rules: [{ required: true, message: '必选' }] },
              ]"
              @change="handleChange"
            >
              <a-select-option value="Y"> </a-select-option>
              <a-select-option value="N"> </a-select-option>
            </a-select> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="银联商户类别" v-bind="formItemLayout">
            <a-select
              v-decorator="[
                'cupsMcc',
                { rules: [{ required: true, message: '必选' }] },
              ]"
              @change="handleChange"
            >
              <a-select-option value="Y"> 支持 </a-select-option>
              <a-select-option value="N"> 不支持 </a-select-option>
            </a-select>
          </a-form-item></a-col
        >
      </a-row>
      <a-row>集团证件信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24"
          ><a-form-item label="注册号" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'licenceCode',
                {
                  rules: [
                    { max: 18, message: '统一社会信用代码最长18位' },
                    { required: true, message: '必填' },
                  ],
                },
              ]"
            /> </a-form-item
        ></a-col>
        <a-col :md="12" :sm="24"
          ><a-form-item label="注册类型" v-bind="formItemLayout">
            <a-select v-decorator="['licenceType']">
              <a-select-option value="01">小微商户</a-select-option>
              <a-select-option value="02">个体工商户</a-select-option>
              <a-select-option value="03">企业</a-select-option>
              <a-select-option value="04">党政机关及事业单位</a-select-option>
              <a-select-option value="99">其他组织</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="注册资本" v-bind="formItemLayout">
            <a-select v-decorator="['registerCapital']">
              <a-select-option value="1">10万以下</a-select-option>
              <a-select-option value="2">10万-100万</a-select-option>
              <a-select-option value="3">100万-500万</a-select-option>
              <a-select-option value="4">500万-1000万</a-select-option>
              <a-select-option value="5">10000万以上</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="生效日期" v-bind="formItemLayout">
            <a-date-picker
              v-decorator="[
                'licenceEffectiveDate',
                { rules: [{ required: true, message: '必填' }] },
              ]"
              @change="onChange"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="失效日期" v-bind="formItemLayout">
            <a-date-picker
              v-decorator="[
                'licenceExpiryDate',
                { rules: [{ required: true, message: '必填' }] },
              ]"
              @change="onChange"
            />
            <a-button size="samll">长期</a-button>
          </a-form-item></a-col
        >
        <a-col :md="12" :sm="24">
          <a-form-item label="营业执照注册地址－省" v-bind="formItemLayout">
            <a-select
              v-decorator="[
                'registerProvince',
                { rules: [{ required: true, message: '必填' }] },
              ]"
            >
              <a-select-option></a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="营业执照注册地址－市" v-bind="formItemLayout">
            <a-select
              v-decorator="[
                'registerCity',
                { rules: [{ required: true, message: '必填' }] },
              ]"
            >
              <a-select-option></a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="营业执照注册地址－区" v-bind="formItemLayout">
            <a-select
              v-decorator="[
                'registerArea',
                { rules: [{ required: true, message: '必填' }] },
              ]"
            >
              <a-select-option></a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="详细地址" v-bind="formItemLayout">
            <a-input
              row="2"
              v-decorator="[
                'registerAddr',
                {
                  rules: [
                    { required: true, message: '必填' },
                    { max: 256, message: '不超过256个字符' },
                  ],
                },
              ]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>集团法人信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
           <a-form-item label="法人姓名" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'artifName',
                {
                  rules: [
                    { required: true, message: '必填' },
                    { max: 20, message: '不超过20个字符' },
                  ],
                },
              ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
           <a-form-item label="法人身份证号码" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'artifCertNo',
                {
                  rules: [
                    { required: true, message: '必填' },
                    { max: 20, message: '不超过20个字符' },
                  ],
                },
              ]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
           <a-form-item label="法人联系电话" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'artifMobile',
                {
                  rules: [
                    { required: true, message: '必填' },
                    { max: 11, message: '不超过11个字符' },
                  ],
                },
              ]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>集团联系人信息</a-row>
      <a-row>
        <a-col :md="12" :sm="24">
           <a-form-item label="联系人姓名" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'contactName',
                {
                  rules: [
                    { max: 20, message: '不超过20个字符' },
                  ],
                },
              ]"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
           <a-form-item label="联系人电话" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'contactPhone',
                {
                  rules: [
                    { max: 11, message: '不超过11个字符' },
                  ],
                },
              ]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
           <a-form-item label="联系人邮箱" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'contactEmail',
                {
                  rules: [
                    { max: 128, message: '不超过128个字符' },
                  ],
                },
              ]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-bootom-button">
      <a-button @click="handleSubmit" type="primary" :loading="loading"
        >保存
      </a-button>
      <a-button style="margin-left: 0.8rem" @click="onClose">取消</a-button>
    </div>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 12 },
};
export default {
  name: "MarketInfoAdd",
  props: {
    marketInfoAddVisiable: {
      default: false,
    },
  },
  data() {
    return {
      marketInfo: {},
      loading: false,
      roleData: [],
      formItemLayout,
      form: this.$form.createForm(this),
    };
  },
  methods: {
    reset() {
      this.loading = false;
      this.form.resetFields();
    },
    onClose() {
      this.reset();
      this.$emit("close");
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.setMarketInfoFields();
          this.loading = true;
          this.marketInfo.roleId = this.marketInfo.roleId.join(",");
          // this.$post('marketInfo', {
          //   ...this.marketInfo
          // }).then((r) => {
          //   this.reset()
          //   this.$emit('success')
          // }).catch(() => {
          //   this.loading = false
          // })
        }
      });
    },

    setMarketInfoFields() {
      let values = this.form.getFieldsValue(["dstChannelId", "dstChannelName"]);
      if (typeof values !== "undefined") {
        Object.keys(values).forEach((_key) => {
          this.marketInfo[_key] = values[_key];
        });
      }
    },
  },
  watch: {},
};
</script>
